<template>
	<div id="orders">

		<div class="order_list">
			<div class="top_type">
				<div class="tab my-flex-around">
					<div class="tab-item my-flex-center" :class="[{'active':type==item.id}]" @click="changeType(item.id,index)" v-for="(item,index) in categoryData">
						<span class="all">{{item.name}}</span>
					</div>

				</div>
			</div>
			<div class="order_form">
				<template v-for="(item,index) in tableData">
					<div class="table_list">
						<div class="top_title my-flex-between">
							<div class="left one-line my-flex-left">
								<img src="../../assets/centers/icon_store.png" />
								<span>{{item.traffickerName}}</span>
							</div>
							<div class="center">
								<span class="date">{{item.createDate}}</span>
								<span class="orderno">订单号：{{item.orderNo}}</span>
							</div>
							<div class="right_order">
								<template v-if="type=='canceled'">
									{{item.cancelStatusCN}}
								</template>
								<template v-else>
									{{item.orderStatusCN}}
								</template>

							</div>
						</div>
						<el-table class="hover" :data="item.list" @click.native="goDetail(item)" :span-method="objectSpanMethod" border style="width: 100%">
							<el-table-column prop="productName">
								<template slot-scope="scope">
									{{scope.row.productName}}
								</template>
							</el-table-column>
							<el-table-column prop="">
								<template slot-scope="scope">
									{{scope.row.qty}}{{scope.row.unitIdCN}}
								</template>

							</el-table-column>
							<el-table-column prop="priceCN">
							</el-table-column>
							<el-table-column width="210">
								<template slot-scope="scope">
									<!--<el-button size="mini" @click.stop="downloadSignfile(scope.$index, item.docUrl)">下载合同</el-button>-->
									<el-button size="mini" type="danger" @click.stop="goshipdetail(item.id, scope.row)">运货查询</el-button>
								</template>
							</el-table-column>
							<el-table-column>
								预估运费：{{item.freightCharge}}
							</el-table-column>
							<el-table-column>
								实付 <span>
											{{item.realPriceCN}}
										</span>
							</el-table-column>
							<el-table-column>
								<template slot-scope="scope">
									<el-button v-if="item.cancelStatus=='normal'&&item.orderStatus=='wait_paid'" size="mini" @click.stop="cancelOrders(scope.$index, item.id)">取消订单</el-button>
									<el-button v-if="item.cancelStatus=='normal'&&item.orderStatus=='completed'" size="mini" type="danger" @click.stop="orderDelete(item.id, scope.row)">删除订单</el-button>
									<el-button v-if="item.cancelStatus=='normal'&&item.orderStatus=='wait_received'" type="danger" @click.stop="confirmReceipt(item.id, scope.row)">确认收货</el-button>

								</template>
							</el-table-column>
						</el-table>

					</div>
					<!--<div class="page-change my-flex-center">
									<div class="my-flex-center">
										<img src="../../assets/priceType/icon_left.png" @click="pageChange(tableData[index]-1,item,index)" alt="" />
										<span class="color-red">{{tableData[index] }}</span>
										<span> / {{Math.ceil(item.total/3)}}</span>
										<img src="../../assets/priceType/icon_right.png" @click="pageChange(tableData[index]+1,item,index)" alt="" />
										<span>跳转至第</span>
										<el-input-number size='mini' controls-position="right" :precision='0' :min="1" :max="Math.ceil(item.total/3)"></el-input-number>
										<span>页</span>
										<li class="jump bg-red my-btn">跳转</li>
									</div>
								</div>-->
				</template>
				<div class="pagination my-flex-center" v-if="tableData.length>0">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchCondition.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</div>
			<v-empty v-if="tableData.length==0"></v-empty>
		</div>

		<el-dialog id="shipdetail" :visible.sync="visible">
			<div class="shipcontent">
				<div class="ship_cicle" v-for="item in shipTableData">
					<div class="ship_top my-flex-between">
						<span class="name">{{item.customerName}}</span>
						<span class="shipnum">运货批次号：{{item.planNo}}</span>
						<span class="shipstatus" :class="[logstatus(item.status)]">{{item.statusCN}}</span>
					</div>
					<el-table :data="shipTableData" border style="width: 100%">
						<el-table-column prop="categoryName" label="油种">
						</el-table-column>
						<el-table-column prop="planQty" label="计划数量" width="70">
							<template slot-scope="scope">
								{{scope.row.planQty}}{{scope.row.unitCN}}
							</template>
						</el-table-column>
						<el-table-column prop="realQty" label="实际数量" width="70">
							<template slot-scope="scope">
								{{scope.row.realQty}}{{scope.row.unitCN}}
							</template>
						</el-table-column>
						<el-table-column prop="planDate" label="计划日期">
						</el-table-column>
						<el-table-column prop="realDate" label="实际日期">
						</el-table-column>
					</el-table>
				</div>

			</div>
		</el-dialog>
		<el-dialog id="cancelorder" title="填写订单取消原因" :visible.sync="cancelDiagShow">
			<div class="cancelReaseon">
				<el-form :model="cancelOrder" label-width="100px" class="demo-ruleForm">
					<el-form-item label="取消原因：" prop="applyReason">
						<el-input type="textarea" v-model="cancelOrder.applyReason"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="my-flex-right exdialog-footer">
				<el-button @click="close">关闭</el-button>
				<el-button type="primary" @click="handleSave()">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import service from '@/js/services/orderservice.js';
	inject: ['closeLoading', 'hasPermission'];
	export default {

		data() {
			return {
				currrentId: 0,
				categoryData: [{
					id: 'wait_paid',
					name: '待付款',
					num: 0
				}, {
					id: 'wait_shipped',
					name: '待发货',
					num: 1
				}, {
					id: 'wait_received',
					name: '待收货',
					num: 2
				}, {
					id: 'canceled',
					name: '已取消',
					num: 3
				}, {
					id: 'all',
					name: '全部',
					num: 4
				}],
				type: 'wait_paid',
				useType: 1, //订单列表里的产品列表
				currentIndex: 0,
				tableData: [],
				cancelOrder: {
					businessId: 0,
					applyReason: ''
				},
				canceling: false,
				index: 0, //选中的行,
				from: null,
				total: 0,
				visible: false,
				shipTableData: [],
				cancelDiagShow: false,
				searchCondition: {
					orderStatus: 'wait_paid',
					pageNum: 1,
					pageSize: 9
				}
			}
		},
		mounted() {
			let arr = ['orderStatus'];
			this.tool.getDirByKey(this, arr)
				.then(() => {

				})
			this.getOrders(this.type)

		},
		methods: {
			...service,
			handleCurrentChange(val) { //翻页
				this.searchCondition.pageNum = val;
				this.getOrders(this.type)
			},
			handleSizeChange(val) { //每页数量
				this.searchCondition.PageSize = val;
				this.getOrders(this.type)
			},
			cancelOrders(index, id) {
				this.cancelDiagShow = true;
				this.cancelOrder.businessId = id;
				this.index = index;
			},
			confirmReceipt(id, row) {
				this.$confirm('您确认要收货吗？')
					.then(_ => {
						this.confirmReceipts(id)
					})
					.catch(_ => {});

			},
			orderDelete(id, index) {
				this.$confirm('您确认要删除订单吗？')
					.then(_ => {
						this.orderDeletes(id)
					})
					.catch(_ => {});

			},
			close() {
				this.cancelDiagShow = false;
				this.cancelOrder.applyReason = '';
			},
			handleSave() {
				this.cancelApply();
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
					if(rowIndex % 2 === 0) {
						return {
							rowspan: 2,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},
			changeType(type, index) {
				this.type = type;
				this.currentIndex = index;
				this.tableData = [];
				this.getOrders(this.type);
				//				this.$router.replace('orders?type=' + this.type);

			},
			downloadSignfile(index, itemurl) {
				console.log(itemurl);
				return
				window.location.href = itemurl;
			},
			goshipdetail(id, row) {
				let orderId = id;
				this.getShippingList(orderId, row.id);
				//				this.$router.push("shipping?orderId=" + orderid+ "&indentId=" + indentid);
			},
			logstatus(type) {
				if(type == 0) {
					return 'incompleteLog';
				} else {
					return 'completeLog';
				}
			},
			pageChange(page, item, index) {
				let pageTotal = Math.ceil(item.total / 3);
				if(page < 1 || page > pageTotal) {
					return;
				}
				this.productNextSearch(page, item, index);
				console.log(item)
			},
			goDetail(item){
				console.log(item)
				this.$router.push('/orders/detail?id='+item.id);
			}
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				if(from.fullPath == '/') {

					if(vm.$route.query && vm.$route.query.ids) {
						vm.httptool.ajaxPost('sign/resultDetail', {
							ids: vm.$route.query.ids
						}, res => {
							console.log(res)
							if(res.data.reason) {
								//								vm.$router.push('/orders?type=wait_paid');
							} else {
								vm.$router.push('/orderconfirm');
							}
						})
					}
				}

			})
		},
	}
</script>

<style lang="less" src="../../less/page/order/order.less"></style>